<template>
  <div class="mine">
    <div class="content">
      <h2>饿了么</h2>
      <div class="head">
        <div class="left">
          <div class="headImg">
            <img :src="userinfo.avatarUrl">
          </div>
          <div class="account">
            <span>{{userinfo.id}}</span>
            <span>{{userinfo.phone | phone}}</span>
          </div>
        </div>
        <div class="set">
          账户设置
        </div>
      </div>
      <div class="card">
        <div >
          <i>吃货卡</i>
          <span>吃货豆：</span>
          <span>1461</span>
        </div>
        <p>
          升级超级吃货卡，每月得无门槛红包，下单5倍返回吃货豆</p>
      </div>
      <div class="wallet">
        <div class="left">
          <van-icon name="label" />
          <span>红包</span>
          <p>7张今日到期</p>
        </div>
        <div class="right">
          <van-icon name="bookmark" />
          <span>余额</span>
          <p>0元</p>
        </div>
      </div>
      <div class="tool">
        <h2>常用工具</h2>
        <div class="tool_card">
          <div v-for="(item,index) in cardList" :key="index" @click="$router.push(item.to)">
            <van-icon :name="item.icon" />
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="service">
        <div class="cash">
          <p>邀请好友赚现金</p>
          <span>最高得15元</span>
          <div class="cashImg">
            <img src="@/assets/images/mine_03.png" alt="">
          </div>
          <div class="btn">
            <span>去邀请</span>
            <span>查佣金</span>
          </div>
        </div>
       <div class="cash">
          <p>饿了么服务号</p>
          <span>关注后及时接收系统通知</span>
          <div class="cashImg">
            <img src="@/assets/images/mine_05.png" alt="">
          </div>
          <div class="btn">
            <span>立即关注</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      userinfo: JSON.parse(localStorage.getItem('userinfo')) ? JSON.parse(localStorage.getItem('userinfo')) : {} ,
       cardList:[
        {
          icon:"location-o",
          name:"我的地址",
          to:"/home"
        },
        {
          icon:"service-o",
          name:"我的客服",
          to:"/home"
        },
        {
          icon:"like-o",
          name:"店铺关注",
          to:"/collection"
        },
        {
          icon:"star-o",
          name:"评价有礼",
          to:"/home"
        }

      ]
    }
  },
  filters:{
    phone(vla){
      return vla.slice(0,3) + '****' + vla.slice(-5,-1)
    }
  }
}
</script>

<style scoped lang="scss">
.mine{
  background-color: #f5f5f5;
  overflow: hidden;
  .content{
    margin: 0 .2667rem;
    h2{
      font-size: .64rem;
       margin: .4rem 0 ;
       font-weight:bold;
    }
    .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        .headImg{
          width: 1.6rem;
          height: 1.6rem;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .account{
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 1.6rem;
          margin-left: .2667rem;
          span:first-child{
            font-size: .5333rem;
            font-weight: bold;
          }
          span:last-child{
            font-size: .3733rem;
            color: #ccc;
          }
        }
      }
      .set{
        font-size: .48rem;
        border: .0267rem solid #999;
        border-radius: .5333rem;
        padding: .08rem .2133rem;
      }
    }
    .card{
      background-color: #1989fa;
      border-radius: .2667rem;
      margin-top: .4rem;
      box-sizing: border-box;
      padding: .2667rem;
      div{
        margin-bottom: .2667rem;
        color: white;
        i{
          padding-right: .4rem;
          border-right: .0267rem solid #f5f5f5;
        }
        span:nth-child(2){
          padding-left: .4rem;
          font-size: .4267rem;
        }
      }
      p{
        font-size: .32rem;
        color: #eee;
      }
    }
    .wallet{
      background-color: white;
      margin-top: .2667rem;
      border-radius: .2667rem;
      padding: .2667rem;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .left,.right{
        text-align: center;
        color: .4267rem;
        i{
          color: red;
        }
        span{
          font-size: .5333rem;
        }
        p{
          font-size: .3733rem;
          margin-top: .2667rem;
          color: #999;
        }
      }
    }
    .tool{
      margin: .2667rem 0;
      background-color: white;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 .2667rem .2667rem;
      border-radius: .2667rem;
      h2{
        font-size: .48rem;
        margin-top: .2667rem;
      }
      .tool_card{
        display: flex;
        justify-content: space-around;
        div{
          display: flex;
          flex-direction: column;
          align-items: center;
          i{
            font-size: .64rem;
            font-weight: bold;
            margin-bottom: .2667rem;
          }
          span{
            font-size: .3733rem;
          }
        }
      }
    }
    .service{
      display: flex;
      justify-content: space-between;
      margin-bottom: .2667rem;
      .cash{
        box-sizing: border-box;
        width: 49%;
        background-color: white;
        border-radius: .2667rem;
        padding: .2667rem;
        p{
          font-weight: normal;
          font-size: .5333rem;
        }
        span{
          font-size: .3733rem;
        }
        .cashImg{
          background-color: #f5f5f5;
          border-radius: .2667rem;
          padding: .5333rem;
          margin: .2667rem 0;
          display: flex;
          img{
            margin:auto;
            width: 1.3333rem;
          }
        }
        .btn{
          text-align: center;
          span{
            font-size: .4rem;
            border: .0267rem solid #ccc;
            padding: .1333rem .2667rem;
            border-radius: .4rem;
            margin: 0 .1333rem;
          }
        }
      }
    }
  }
  
}
</style>